<template>
	<view class="container">
		<view class="header">
			<view class="daohang flex flex-align">
				<view class="fanhui" @click="go_back">
					<tui-icon name='toleft' :size='34' color='#333333'></tui-icon>
				</view>
				<view class="search flex flex-align">
					我的订单
					<!-- <tui-icon name='search' :size='20' color='#b3b3b3'></tui-icon>
					<input type="text" placeholder="搜索订单" v-model="search"> -->
				</view>
			</view>
			<view class="daohang_list flex flex-align">
				<view class="flex-1" :class="tab==0?'active':''" @click="tabs(0)">全部</view>
				<!-- <view class="flex-1" :class="tab==1?'active':''" @click="tabs(1)">待预约</view> -->
				<view class="flex-1" :class="tab==2?'active':''" @click="tabs(2)">待确认</view>
				<!-- <view class="flex-1" :class="tab==3?'active':''" @click="tabs(3)">待收货</view> -->
				<view class="flex-1" :class="tab==4?'active':''" @click="tabs(4)">已完成</view>
			</view>
		</view>
		<view class="dingdan_list">
			<view class="list" v-if="orderList.length!=0" v-for="(res, index) in orderList" :key="res.id">
				<view class="one flex flex-align flex-bt">
					<view class="left flex flex-align">
						<!-- <tui-icon name="shop" :size="18" color="#212121"></tui-icon> -->
						<view class="title">订单号:{{res.order_no}}</view>
					</view>
					<view class="right">{{ res.status_name }}</view>
				</view>
				<view class="two flex" v-for="(item, index) in res.order" :key="index">
					<image :src="item.goods_cover" mode="aspectFit" class="left"></image>
					<view class="right">
						<view class="title text_two">{{ item.goods_name }}</view>
						<view class="chima uni-ellipsis" style="margin-top: 10rpx;">{{item.goods_spec}}</view>
					</view>
					<view class="price">
						<view class="jine">￥{{item.price_selling}}</view>
						<view class="num " style="margin-top: 10rpx;">x{{ item.stock_sales }}</view>
					</view>
				</view>
				<view class="tree flex-end flex flex-align">
					<view class="left">总计:</view>
					<view class="right" v-if="res.status==1">￥{{ res.amount_total}}</view>
					<view class="right" v-else>￥{{ res.amount_real}}</view>
				</view>
				<view class="anniu flex-end flex flex-align ">
					<view class="btn quxiao" @click="goQuxiao(res.order_no)" v-if='res.status==1'>取消</view>
					<view class="btn hei" @click="goPay(res.order_no)" v-if='res.status==1'>去确认</view>
					<view class="btn hei" @click="goQueren(res.order_no)" v-if='res.status==3'>确认收货</view>
					<view class="btn quxiao" @click="go_url(res.order_no)" v-if='res.status!=1'>查看详情</view>
				</view>
			</view>
			<view class="empty-box" v-if='orderList.length==0'>
				<image src="https://firework.cyx.zzcyx1688.cn/web/static/noCart.png" mode=""></image>
				<view class="uni-text-gray">暂无订单~</view>
			</view>
		</view>
		<tui-modal :show="popupShow" @cancel="hidePopup" :custom="true" background="transparent">
			<view class="cui_fahuo" v-if="is_manghe">
				<image src="https://firework.cyx.zzcyx1688.cn/web/static/manghe.gif" mode="widthFix" class="manghe_img"></image>
				<!-- <view class="flex flex-align flex-center">
					<tui-icon name='circle-fill' color="#333" :size="60"></tui-icon>
				</view>
				<view class="wenzi">已告知商家尽快给您安排发货</view>
				<view class="wenzi1 uni-text-gray">请耐心等待</view>
				<view class="flex flex-align flex-center">
					<view class="btn wuliu">联系卖家</view>
					<view class="btn hei" style="margin-left: 60rpx;" @click="hidePopup">我知道了</view>
				</view> -->
			</view>
		</tui-modal>
		
		<tui-payment :show="show"  @close="guanbi" @finish='submite' :data="data"></tui-payment>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				search:'',
				tab:0,
				popupShow:false,
				show:false,
				data:{money:"100",yue:"1000"},
				page:1,
				orderList:[],
				is_manghe:false,
				is_dingdan:false,
				manghe_dingdan:'',
				mang_id:'',
				is_combin:''
			}
		},
		onLoad(e) {
			if(e.type){
				this.tab = e.type
			}
		},
		onShow() {
			this.page=1
			this.orderList = []
			this.getOrderList();
		},
		onReachBottom() {
			let that = this
			that.page++
			that.getOrderList()
		},
		methods: {
			goPay(e){
				console.log(e)
				this.$util.href('/pages/shop/order_confirm?id='+e)
			},
			go_url(e,d){
				this.is_dingdan = false
				this.mang_id = ''
				this.$util.href('/pages/dingdan/order_detail?id='+e)
			},
			go_back(){
				uni.navigateBack()
			},
			fukuan(){
				this.show = true
			},
			colse_is(){
				this.is_dingdan =false
			},
			guanbi(){
				this.show = false
			},
			submite(e){
				console.log(e)
			},
			tabs(e){
				let that = this
				that.tab = e
				that.page=1
				that.orderList = []
				that.getOrderList();
			},
			hidePopup(){
				this.popupShow = false
			},
			cui_fahuo(e,d){
				let that = this
				that.mang_id = e
				that.is_combin = d
				that.popupShow = true
				that.is_manghe = true
				that.tui.request("v1/shop/orders/blindProduct", "POST", {order_id:e}, false, false, true).then((res) => {
					console.log(res)
					that.manghe_dingdan = res
					setTimeout(function(){
						that.is_manghe = false
						that.popupShow = false
						that.is_dingdan = true
					},3000)
				}).catch((res) => {})
			},
			getOrderList() {
				let that = this
				that.tui.request("api.auth.order/orderList", "get", {page:that.page,status:that.tab}, false, false, true).then((res) => {
					console.log(res)
					that.orderList = that.orderList.concat(res.data.list)
				}).catch((res) => {})
				
			},
			goQuxiao(e){
				let that = this
				that.tui.request("api.auth.order/cancel", "post", {order_no:e}, false, true, false).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						setTimeout(function(){
							that.page=1
							that.orderList = []
							that.getOrderList()
						},1000)
					}
					
				}).catch((res) => {})
			},
			goQueren(e){
				let that = this
				that.tui.request("api.auth.order/confirm", "post", {order_no:e}, false, true, false).then((res) => {
					that.tui.toast(res.info)
					if(res.code==1){
						setTimeout(function(){
							that.page=1
							that.tab = 4
							that.orderList = []
							that.getOrderList()
						},1000)
					}
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f5f5f5;}
	.header{background: #fff;position: fixed;top: 0;left: 0;padding: 60rpx 0rpx 0;width: 100%;z-index: 111;
		/* #ifdef MP */
		padding: 170rpx 0rpx 0;
		/* #endif */
		.daohang{padding:0 30rpx 20rpx;
			.fanhui{margin-right: 20rpx;}
			.search{width: 84%;padding: 0rpx 30rpx;border-radius: 50rpx;
				input{font-size: 26rpx;padding-left: 10rpx;}
			}
		}
		.daohang_list{
			.flex-1{text-align: center;padding: 10rpx 0 20rpx;font-size: 30rpx;}
			.flex-1.active{position: relative;}
			.flex-1.active::after{position: absolute;bottom:6rpx;left: 50%;width: 50rpx;height: 3px;background: #333;content: '';margin-left: -25rpx;}
		}
	}
	.dingdan_list{padding-top: 220rpx;padding-bottom: 10rpx;
		/* #ifdef MP */
		padding-top: 330rpx;
		/* #endif */
		.list{background: #fff;padding: 30rpx 30rpx 50rpx;margin: 30rpx;border-radius: 10rpx;
			.one{margin-bottom: 30rpx;
				.title{margin-left: 10rpx;
					text{background: #ff3b4b;display: inline-block;padding: 0rpx 8rpx;color: #fff;border-radius: 1px;margin-right: 6rpx;font-size: 20rpx;}
				}
				.right{font-size: 34rpx;font-weight: bold;}
			}
			.two{
				.left{width:170rpx ;height: 182rpx;}
				.right{width: 350rpx;padding-left: 20rpx;
					.title{font-size: 32rpx;}
					.chima{font-size: 28rpx;color: #999;}
				}
				.price{text-align: right;
					.jine{font-size: 34rpx;}
					.num{font-size: 28rpx;color: #999;}
				}
			}
			.tree{
				.left{font-size: 26rpx;}
				.right{font-size: 34rpx;margin-left: 10rpx;}
			}
			.anniu{margin-top: 30rpx;
				.hei{background: #f20;color: #fff;}
			}
			
		}
	}
	.cui_fahuo{padding: 100rpx 0;text-align: center;
		.wenzi{font-weight: bold;font-size: 32rpx;margin-bottom: 10rpx;}
		.wenzi1{margin-bottom: 40rpx;}
		.manghe_img{width: 100%;}
		.tui-modal-box{background: transparent!important;}
	}
	.btn{padding: 0 30rpx;margin-left: 30rpx;height: 80rpx;line-height: 80rpx;}
	.quxiao{padding: 0 60rpx;background: #fff;border: 1px solid #f20;color: #f20;}
	.wuliu{padding: 0 30rpx;background: #fff;border: 1px solid #f20;color: #f20;}
</style>